<template>
  <div class="tab-content">
    <div class="w-[765px]">
      <el-form
        ref="ruleForm"
        :v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <div class="h1">园区基本信息</div>
        <!-- 园区名称 -->
        <el-form-item label="" prop="name" class="row-all">
          <template #label>
            <div class="form-label required">园区名称</div>
          </template>
          <el-input
            v-model="form.name"
            :disabled="disabled"
            placeholder="20字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 规划面积 -->
        <el-form-item label="" prop="planArea" class="row-left">
          <template #label>
            <div class="form-label">规划面积</div>
          </template>
          <el-input v-model="form.planArea" :disabled="disabled" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平方公里</div>
          </el-input>
        </el-form-item>
        <!-- 建成面积 -->
        <el-form-item label="" prop="doneArea" class="row-right">
          <template #label>
            <div class="form-label required">建成面积</div>
          </template>
          <el-input v-model="form.doneArea" :disabled="disabled" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平方公里</div>
          </el-input>
        </el-form-item>
        <!-- 园区类型 -->
        <el-form-item label="" prop="type" class="row-left">
          <template #label>
            <div class="required">园区类型</div>
          </template>
          <el-select v-model="form.type" class="w-full" :disabled="disabled">
            <el-option
              v-for="item in parkTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 园区级别 -->
        <el-form-item label="" prop="level" class="row-right">
          <template #label>
            <div class="required">园区级别</div>
          </template>
          <el-select v-model="form.level" class="w-full" :disabled="disabled">
            <el-option
              v-for="item in parkLevelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 园区地址 -->
        <el-form-item label="" prop="addrs" class="row-left">
          <template #label>
            <div class="required">
              <span>园区地址</span>
              <span v-if="form.position">{{ `(${form.position})` }}</span>
            </div>
          </template>
          <el-input
            v-model="form.addrs"
            :disabled="disabled"
            readonly
            placeholder="点击右侧按钮在地图上选点"
          >
            <i
              slot="suffix"
              class="el-icon-location-outline text-2xl pr-1 pt-[4px] cursor-pointer"
              @click="isShowMap = true"
            />
          </el-input>
        </el-form-item>
        <!-- 园区范围线 -->
        <el-form-item label="" prop="scopeLine" class="row-right">
          <template #label>
            <div class="">园区范围线</div>
          </template>
          <FileUpload :file-list.sync="form.scopeLine" />
        </el-form-item>
        <div class="h1">多媒体资料</div>
        <!-- 图片 -->
        <el-form-item label="" prop="imgList" class="row-all">
          <template #label>
            <div>图片</div>
          </template>
          <CustomUpload :img-list.sync="form.imgList" />
        </el-form-item>
        <!-- 视频 -->
        <el-form-item label="" prop="videoList" class="row-all">
          <template #label>
            <div>视频</div>
          </template>
          <VideoUpload :img-list.sync="form.videoList" />
        </el-form-item>
        <!-- VR全景 -->
        <el-form-item label="" prop="vrLink" class="row-all">
          <template #label>
            <div>VR全景</div>
          </template>
          <el-input
            v-model="form.vrLink"
            :disabled="disabled"
            placeholder="粘贴全景链接"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <Save :disabled="loading" @onPreview="handlePreview" @onSave="handleSave" />

    <PositionPicker
      :visible.sync="isShowMap"
      :position.sync="form.position"
      :addrs.sync="form.addrs"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Save from '../common/Save.vue'
import addEditMixin from '../common/addEditMixin'
import CustomUpload from '@/components/admin/manage/carrier/common/CustomUpload/index.vue'
import FileUpload from '@/components/admin/manage/carrier/common/CustomUpload/fileUpload.vue'
import VideoUpload from '@/components/admin/manage/carrier/common/CustomUpload/videoUpload.vue'
import {
  parkTypeOptions,
  parkLevelOptions,
} from '@/components/admin/manage/carrier/common/dictionary'
import PositionPicker from '@/components/admin/manage/carrier/common/CustomAMap/PositionPicker.vue'

const selectKey = [
  { key: 'type', options: 'parkTypeOptions' },
  { key: 'level', options: 'parkLevelOptions' },
]

const defaultForm = {
  name: '',
  planArea: null,
  doneArea: null,
  type: null,
  level: null,
  addrs: null,
  scopeLine: [],
  imgList: [],
  videoList: [],
  vrLink: null,
  position: null,
}
export default Vue.extend({
  components: { PositionPicker, CustomUpload, Save, FileUpload, VideoUpload },
  mixins: [addEditMixin({ defaultForm, selectKey, templateName: 'B_CONSOLE_PARK' })],

  data() {
    return {
      form: { ...defaultForm },
      rules: {
        name: [
          { required: true, message: '请输入园区标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度为3~20个字符', trigger: 'blur' },
        ],
        doneArea: [{ required: true, message: '请输入建成面积', trigger: 'blur' }],
        type: [{ required: true, message: '请选择园区类型', trigger: 'change' }],
        level: [{ required: true, message: '请选择园区级别', trigger: 'change' }],
        addrs: [{ required: true, message: '请选择园区地址', trigger: 'change' }],
        planArea: [{ message: '请选择园区地址', trigger: 'blur' }],
      },
      parkTypeOptions,
      parkLevelOptions,
    }
  },
  head: {
    title: '基本信息',
  },
  methods: {},
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
